import { useGetDocumentQuery } from '@/generated/graphql'
import { Route } from '@/router'
import { useCourseSessionStore } from '@/stores/useCourseStore'
import '@/styles/classStep.scss'
import { Modal } from 'ant-design-vue'
import { computed, defineComponent, reactive, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'classStep',
  props: {
    selectTopic: {
      default: 0
    }
  },
  setup(props) {
    const { t } = useI18n()

    const data = reactive<{
      selectContentIndex: number //当前选中的小节
    }>({ selectContentIndex: props.selectTopic })
    //获取章节信息
    const courseActionStore = useCourseSessionStore()
    const { data: selectDocument } = useGetDocumentQuery({
      variables: { where: { id: courseActionStore.document?.id } }
    })
    watchEffect(() => {
      if (selectDocument.value?.document) {
        courseActionStore.setDocument(selectDocument.value.document as any)
      }
    })

    const contents = computed(() => selectDocument.value?.document?.contents)
    //当前选中的信息
    const selectContent = computed(() => {
      if (selectDocument.value?.document) {
        document.getElementById('step')?.scrollTo(0, 0)

        const _document = selectDocument.value.document
        return _document.contents[data.selectContentIndex]
      }
      return undefined
    })

    const router = useRouter()
    //退出逻辑
    return () => (
      <div class="w-full h-[calc(100vh-68px-50px-40px)]" id="classStep">
        <div class="flex items-center justify-center h-10">
          <div class="block overflow-hidden text-lg h-full text-gray-500 whitespace-nowrap overflow-ellipsis bg-white w-full flex items-center justify-center border-x-0 border-t-0 border-b-1 border-solid border-gray-100">
            {selectContent.value?.title}
          </div>
        </div>
        <div class=" w-full overflow-y-auto h-full p-5 overflow-hidden bg-white" id="step">
          <v-md-preview text={selectContent.value?.text} />
        </div>

        <div class="flex items-center justify-end w-full px-5 h-11 border-t-1">
          {/*翻页按钮*/}
          <div class="space-x-2">
            <div>
              {contents.value?.length && data.selectContentIndex > 0 && (
                <a-button
                  shape="round"
                  type="primary"
                  onClick={() => {
                    data.selectContentIndex--
                  }}
                >
                  {t('classStep.pre_step')}
                </a-button>
              )}
              {contents.value?.length &&
                (data.selectContentIndex + 1 < contents.value.length ? (
                  <a-button
                    shape="round"
                    type="primary"
                    onClick={() => {
                      data.selectContentIndex++
                    }}
                  >
                    {t('classStep.next_step')}
                  </a-button>
                ) : (
                  <a-button
                    shape="round"
                    type="primary"
                    class="!bg-red-500 !border-none"
                    onClick={() => {
                      Modal.warning({
                        title: t('classStep.end_box_tip_name'),
                        content: t('classStep.end_box_tip_content'),
                        okText: t('classStep.end_box_button_true'),
                        cancelText: t('classStep.end_box_button_false'),
                        closable: true,
                        onOk: () => {
                          //todo 退出小节
                          router.replace({ name: Route.COMPETITION })
                        }
                      })
                    }}
                  >
                    {t('classStep.end_button_name')}
                  </a-button>
                ))}
            </div>
          </div>
        </div>
      </div>
    )
  }
})
